<template>
	<view class="detail-ap">
		<view class="tabList">
			<u-tabs item-width="350" height="80" bar-width="80" :list="tabList" :is-scroll="true" :current="tabCurrent"
				@change="tabChange"></u-tabs>
		</view>
		<view class="main">
			<view class="mian-title" :style="{'height': detailList.isClosed==0 ?'196rpx':'96rpx'}" >
				<view class="xq_title">
					消纳审核(矿坑)
				</view>
				<view class="xq_type" v-if="detailList.isClosed==0" >
					当前节点：{{nodeName}}
				</view>
				<view class="" style="padding: 36rpx;" v-if="detailList.isClosed==0" >
					<steps :steps='numList' :current="stepsnumber"  ></steps>
				</view>
			</view>
			
			<view class="forms"  v-if="tabCurrent==0" >
				<view class="Category_title">
					<view class="line"></view>消纳矿坑信息
				</view>
				<view class="items">
					<view class="field">
						申请人
					</view>
					<view class="content">
						{{detailmsg.applicant || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						联系方式
					</view>
					<view class="content">
						{{detailmsg.contact || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						身份证号码
					</view>
					<view class="content">
						{{detailmsg.identityCard || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						场地类型
					</view>
					<view class="content">
						矿坑
					</view>
				</view>
				<view class="items">
					<view class="field">
						消纳场地名称
					</view>
					<view class="content">
						{{detailmsg.fieldName || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						所在街镇
					</view>
					<view class="content">
						{{detailmsg.street || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						场地地址
					</view>
					<view class="content">
						{{detailmsg.fieldAddress || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field">
						具体地址
					</view>
					<view class="content">
						{{detailmsg.fieldAddressDetailed || '暂无' }}
					</view>
				</view>
				<view class="items">
					<view class="field" style="width: 350rpx;" >
						消纳方量证明材料
						<view class="showpdf">
							<img class="pho"  v-for="item in detailmsg.accommodationFieldApplication" :src="item || emp"  @click="previewPic(item)"  alt="">
						</view>
					</view>
				</view>
				<view class="items" style="flex-direction: column;"  v-if="stepsnumber>=3"  >
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view class="field" style="width: 400rpx;" >
							方案
						</view>
					</view>
					<view class="" style="display: flex;flex-wrap: wrap;">
						<view class="field" v-for="item  in detailmsg.plan " >
							<view class="field"   >
								<img class="pho"  @click="previewPic(item)" :src="item" alt="">
							</view>
						</view>
						<view  class="showpdf"
						v-if="stepsnumber==3"
						style="background-image: url(/static/more.png);height: 200rpx;width: 200rpx;margin-top: 16rpx;" @click="fileTabChoose('1')" ></view>
					</view>
				</view>
				<!-- <view class="items">
					<view class="map_box">
						<map id="navi_map" longitude="119.970882" latitude="30.539185" scale="14" :markers="markers"
							@tap='addmarker'
							:polygon='polygon'
							:polyline="polyline"></map>
					</view>
				</view> -->
			</view>
				
			<circullog  v-else :ids="idd" :nodeName='nodeName'  ></circullog>
				
		</view>
		<!-- 画地图 -->
		<u-popup v-model="showmap" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop" style="height: 950rpx;" >
				<view class="title">
					<view class="" @click="showmap=false">
						取消
					</view>
					<view class="" style="color: #007AFF;" @click="comfirm">
						确认
					</view>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx ">
					sdfds
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="show" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="show=false">
						取消
					</view>
					<view class="">
						{{outorder==1 ? '不通过' :outorder== 2? '退单整改': outorder== 3 ?  '上一节点' :'审核' }}
					</view>
					<view v-if="buttontype==11" style="color: #007AFF;" @click="allocateout">
						确认
					</view>
					<view  v-else style="color: #007AFF;" @click="comfirm">
						确认
					</view>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx ">
					<u-input :enableNative="false"  style="" v-model="type_value" :type="type" :border="border" :height="height"
						placeholder="请填写审核意见" />
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showpart" mode="bottom " :border-radius="border_radius" mask>
			<view class="pop">
				<view class="title">
					<view class="" @click="showpart=false">
						取消
					</view>
					<!-- <view class="">
						{{buttontype==10 ? '请选择参与部门' :'分派处置' }}
					</view> -->
					<view class="" style="color: #007AFF;" @click="comfirm_part">
						确认
					</view>
				</view>
				<view class="checkbox-group" v-if="buttontype==10">
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
							shape="circle" size="45rpx" :key="index" :name="item.orgId">{{item.orgName}}</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="" style="margin:50rpx 20rpx 50rpx 20rpx " v-else>
					<u-input style="" v-model="type_value" :type="type" :border="border" :height="height"
						placeholder="请填写审核意见" />
				</view>

			</view>
		</u-popup>
		
		<u-toast ref="uToast" />
		<view class="footer">
			<view class="" v-show="cricul==0">
				<button class="taketask" v-if="orderType == 0" type="default" @click="taketask">任务认领</button>
				<view class="footer" v-else >
					<!-- 1.是否通过 -->
					<view class="footer" v-if="buttontype==1">
						<button class="heyan" type="default" @click="canceltake">取消认领</button>
						<button class="heyan" type="default" @click="passout(1)">不通过</button>
						<button class="heyan" type="default" @click="passout(2)">退单整改</button>
						<!-- <button class="heyan" type="default" @click="passout(3)">上一节点</button> -->
						<button class="heyan" type="default" @click="passin">通过</button>
					</view>
					<view class="footer" v-else-if="buttontype==3">
						<button class="heyan" type="default" @click="canceltake">取消认领</button>
						<button class="heyan" type="default" @click="passout(1)">不通过</button>
						<button class="heyan" type="default" @click="passout(2)">退单整改</button>
						<!-- <button class="heyan" type="default" @click="passout(3)">上一节点</button> -->
						<button class="heyan" type="default" @click="comfirm">通过</button>
						<!-- <button class="heyan" type="default" @click="updatechutumsg">555</button> -->
					</view>
					<view class="footer" v-else-if="buttontype==10">
						<button class="cancel" type="default" @click="passout(1)">不通过</button>
						<button class="confim" type="default" @click="showpart=true">分派部门</button>
					</view>
					<view class="footer" v-else-if="buttontype==11">
						<button class="heyan" type="default" @click="canceltake">取消认领</button>
						<button class="heyan" type="default" @click="passout(1)">不通过</button>
						<button class="heyan" type="default" @click="passout(2)">退单整改</button>
						<button class="heyan" type="default" @click="passout(3)" v-if="stepsnumber==4" >上一节点</button>
						<button class="heyan" type="default" @click="comfirm_part">通过</button>
					</view>
					<!-- 2.审核意见 -->
					<!-- <button class="taketask" type="default" @click="show=true">
						{{buttontype==1 ? '核验':buttontype==2?'处置' : buttontype==3 ? '审核' : buttontype==4 ? '转派': buttontype==10 ?'分派':'分派中'  }}
					</button> -->
				</view>
			</view>
		</view>
		
		<view class="">
			<u-calendar v-model="showcalendar" :mode="mode" @change='setTime'  ></u-calendar>
		</view>
		
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getWorkOrderLogs,
		getTakeTask,
		postOrderHandle,
		orgByNodeId,
		allocate,
		allocatedo,
		getPdf,
		detailById,
		postWithdraw,
		postOrderAudit,
		getTransferDepartment,
		getNextPersons,
		postOrderDispatch,
		postCheck,
		getMyList
	} from '@/pages/api/orderp/orderp.js'
	import {
		getByOrdersId,
		upAbsorbPic
	} from '@/pages/api/report/orderp.js'
	import {
		uploadUrl
	} from '@/pages/api/report/helperOrderp.js'
	import methodMix from '@/pages/index/approval/xiaona/methodMix_xn.js'
	import circullog from '@/pages/index/approval/circulLog/index'
	import steps from '@/components/orderStep/orderStep.vue'
	export default {
		mixins: [methodMix],
		components:{
			circullog,
			steps
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				id: '',
				detailList: {},
				timeLeft: '',
				formarr: [],
				getphotolist: [],
				chuzhiphotolist: [],
				circulList: [],
				types: ['新建', '核验', '处置', '审核', '转派', '上提', '关闭工单', '关闭'],
				orderColor: ["#418AEC", "#00B853", "#FF9F00", "#F55545", "#00D0CE", "#418AEC", "#8941EC"],
				chuzhiarr: [],
				show: false,
				showpart: false,
				showmap:false,
				closeable: false,
				type: 'textarea',
				autoup: false,
				border: true,
				height: 240,
				type_value: '',
				border_radius: '30rpx',
				orderType: '',
				nodeId: '',
				list: [{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '建设局',
					checked: true,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '水利局',
					checked: false,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '交通局',
					checked: false,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '农业农村局',
					checked: false,
					disabled: false
				},
				{
					nodeId: "19ca0a224aad5d408dd8ea23d1c813c0",
					orgId: "GO_df2f46315d414518a31bea909fbd67a6",
					orgName: '高新区建设局',
					checked: false,
					disabled: false
				}],
				activelist: [],
				flag: false,
				idd: '',
				buttontype: 0,
				list_1: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: [false, false, false, false, false, false, false],
				value1: '',
				value2: '',
				value3: '',
				value4: '',
				value5: '',
				value6: '',
				outorder: false,
				detailmsg: {
					
				},
				checkop: '',
				markers: [{
						iconPath: require("@/static/end.png"),
						id: 0,
						latitude: 39.989643,
						longitude: 116.481028,
						width: 23,
						height: 33,
					},
					{
						iconPath: require("@/static/start.png"),
						id: 0,
						latitude: 39.90816,
						longitude: 116.434446,
						width: 24,
						height: 34,
					},
				],
				polyline: [],
				polygon:[],
				points:[],
				action: 'http://47.96.237.231:8085/zhatu/file/upload',
				form:{
					chukou:[],
					chongxi:[],
					fangchen:[],
					dibang:[],
					shipin:[],
					qita:[]
				},
				date: currentDate,
				date1: currentDate,
				showendTime: false,
				showstartTime: false,
				time: '2021-08-01',
				time1: '2021-08-01',
				showcalendar: false,
				mode: 'range',
				tabList: [{
						name: '审核详情'
					},
					{
						name: '审核历史'
					}
				],
				tabCurrent: 0,
				nodeName:'',
				cricul:0,
				numList:[{
					name: '提交申请'
				},{
					name: '初步审核'
				},{
					name: '联合踏勘'
				}, {
					name: '初步方案'
				},{
					name: '联合会审'
				},{
					name: '渣土办审核'
				}],
				stepsnumber:0,
				emp:'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/emp20210805114713397.png',
			}
		},
		onLoad(op) {
			this.id = op.id
			this.nodeId = op.nodeId
			this.flag = op.flag
			this.idd = op.idd
			this.checkop = op.checkop
			this.nodeName = op.nodeName
			this.cricul = op.currenttab
			this.stepsnumber = op.stepsnumber
			this.test.getDrivingRoute({
				origin: "119.970882,30.539185",
				destination: "119.968224,30.530976",
				success: (data) => {
					// console.log('路线: ', data)
					var points = [];
					if (data.paths && data.paths[0] && data.paths[0].steps) {
						var steps = data.paths[0].steps;
						for (var i = 0; i < steps.length; i++) {
							var poLen = steps[i].polyline.split(";");
							for (var j = 0; j < poLen.length; j++) {
								points.push({
									longitude: parseFloat(poLen[j].split(",")[0]),
									latitude: parseFloat(poLen[j].split(",")[1]),
								});
							}
						}
					}
					this.markers[1].latitude = points[0].latitude
					this.markers[1].longitude = points[0].longitude
					this.markers[0].latitude = points.pop().latitude
					this.markers[0].longitude = points.pop().longitude
						this.polyline.push({
							points: points,
							color: "#FF0000DD",
							width: 6,
						})
			
					// console.log(this.polyline)
				},
			});
		},
		mounted() {

			uni.showLoading({
				title: '加载中'
			});

			setTimeout(function() {
				uni.hideLoading();
			}, 500);

			this.getolddetail()
			this.getdetail()
			this.getorgByNodeId()

		},
		methods: {
			tabChange(index){
				this.tabCurrent = index
			},
			blur(e){
				// console.log(e,this.detailmsg)
			},
			
			setTime(e){
				console.log(e)
				this.time = e.startYear+ '-' +e.startMonth + '-' +  e.startDay
				this.time1 = e.endYear+ '-' +e.endMonth + '-' +  e.endDay
			},
			//增加点位
			addmarker(e){
				console.log(e)
				this.markers.push({
						iconPath: require("@/static/end.png"),
						id: 0,
						latitude: e.latitude,
						longitude: e.longitude,
						width: 23,
						height: 33,
				})
				this.points.push({
					longitude: e.longitude,
					latitude: e.latitude,
				})
				// this.polygon=[]
				this.polygon.push({
					points: this.points,
					color: "#000000DD",
					strokeWidth: 6,
					strokeColor:"#000000DD",
					fillColor:'#000000DD'
				})
				
			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
			},
			onnodeclick(node) {
				console.log(node)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.detail-ap {
		height: 100vh;
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.main {
			flex: 1;
			width: 750rpx;
			background-color: #F2F3F5;
			overflow-x: hidden;

			.mian-title {
				margin-top: 80rpx;
				padding: 32rpx;
				height: 196rpx;
				background-color: #FFFFFF;

				.xq_title {
					font-weight: 600;
					font-size: 40rpx;
					color: #363A44;
					margin-bottom: 24rpx;
				}

				.xq_type {
					font-size: 28rpx;
					color: #B5B7BA;
				}
			}

			.forms {
				// margin-top: 22rpx;
				padding: 26rpx 32rpx 26rpx 0rpx;
				width: 750rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;

				.Category_title {
					display: flex;
					font-weight: 600;
					font-size: 32rpx;
					color: #428FFC;
					height: 92rpx;
					background-color: #F6F7F8;
					line-height: 100rpx;
					padding-left: 32rpx;

					.line {
						height: 32rpx;
						margin: 32rpx 16rpx 0 0;
						width: 4rpx;
						background-color: #428FFC;
					}
				}

				.items {
					display: flex;
					padding: 26rpx 0 26rpx 0;
					font-size: 32rpx;
					margin-left: 32rpx;
					margin-right: 32rpx;
					border-bottom: 2rpx solid #E8E9EC;

					.field {
						width: 242rpx;
						color: #B3B5B9;

						.showpdf {
							margin-top: 16rpx;
							height: 200rpx;
							width: 200rpx;
							border: 1rpx solid #E8E9EC;
							border-radius: 10rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.pho {
								height: 200rpx;
								width: 200rpx;
							}

							.pdf {

								height: 128rpx;
								width: 104rpx;
							}
						}
					}

					.content {
						width: 440rpx;
						color: #B3B5B9;
						// color: #363A44;
					}
				}

				.line {
					height: 5rpx;
					background-color: #F2F3F5;
				}
			}

			.circul {
				display: flex;
				margin-left: 22rpx;
				margin-bottom: 40rpx;
				width: 750rpx;

				.type {
					margin-top: 22rpx;
					height: 50rpx;
					width: 50rpx;
					background-color: #2979FF;
					color: #FFFFFF;
					font-size: 31rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 50rpx;
				}

				.circul_content {
					padding: 22rpx;
					margin-left: 22rpx;
					background-color: #FFFFFF;
					width: 588rpx;
					border-radius: 10rpx;

					.circul_field {
						margin-top: 22rpx;
					}
				}
			}
		}

		.footer {
			display: flex;
			justify-content: center;

			width: 750rpx;
			height: 128rpx;
			background-color: #FFFFFF;
			font-size: 29rpx;
			box-shadow: 2rpx 0 6rpx rgba(0, 0, 0, .12), 0 0 6rpx rgba(0, 0, 0, .04);
			.huishen {
				height: 87rpx;
				width: 120rpx;
				border: 1rpx solid #428FFC;
				border-radius: 20rpx;
				font-size: 25rpx;
				color: #FFFFFF;
				background-color: #428FFC;
				margin-top: 14rpx;
				// margin-right: 5rpx;
				margin-left: 12rpx;
			}
			.heyan {
				height: 87rpx;
				width: 170rpx;
				border: 1rpx solid #428FFC;
				border-radius: 20rpx;
				font-size: 25rpx;
				color: #FFFFFF;
				background-color: #428FFC;
				margin-top: 14rpx;
				// margin-right: 5rpx;
				margin-left: 12rpx;
			}
			.cancel {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				color: #428FFC;
				margin-top: 14rpx;
				// margin-left: 32rpx;
			}

			.confim {
				height: 87rpx;
				width: 339rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
				margin-left: 16rpx;
			}

			.taketask {
				height: 87rpx;
				width: 692rpx;
				line-height: 87rpx;
				border: 1rpx solid #428FFC;
				border-radius: 50rpx;
				background-color: #428FFC;
				color: #FFFFFF;
				margin-top: 14rpx;
			}
		}
	}

	.pop {
		height: 750rpx;
		border-radius: 20rpx;

		.pop_title {
			color: #363A44;
			font-size: 32rpx;
			padding: 40rpx 0 32rpx 32rpx;
			border-bottom: 1rpx solid #EFEFEF;
		}

		.title {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
		}

		.checkbox-group {
			padding: 20rpx;
		}
	}
	#navi_map{
		height: 550rpx;
	}
	.map_box{
		height: 550rpx;
	}
	img {
		height: 116rpx;
		width: 116rpx;
		margin-right: 20rpx;
	}
	.tabList {
		height: 80rpx;
		width: 750rpx;
		z-index: 99;
		position: fixed;
		top: 0rpx;
		background-color: #FFFFFF;
		border-bottom: .5rpx solid #DBDBDB;
	}
</style>
